<!-- 绿色通道 - 患者列表 - 医疗记录 - 体格检查 界面 -->

<template>
  <div class="vital-sign">
    <div class="add-button">
      <el-button type="primary" @click.stop="openAddDialog()">新增</el-button>
      <el-button type="primary" @click.stop="update()">保存</el-button>
    </div>
    <div v-show="JSON.stringify(vitalForm) === '{}'">
      <center>
        <h3>无数据</h3>
      </center>
    </div>
    <el-form ref="vitalForm" :model="vitalForm" :rules="vitalRules" label-width="80px" class="vital-form">
      <div class="card">
        <el-row type="flex">
          <el-form-item label="创伤出血" class="short-text" lable-width="200px">
            <el-radio-group v-model="vitalForm.chuxie">
              <el-radio label="0">有</el-radio>
              <el-radio label="1">无</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-row>
        <el-row type="flex">
          <el-form-item label="受伤部位" class="short-text" lable-width="200px">
            <el-checkbox-group v-model="vitalForm.buwei">
              <el-checkbox label="0">头</el-checkbox>
              <el-checkbox label="1">颈</el-checkbox>
              <el-checkbox label="2">椎</el-checkbox>
              <el-checkbox label="3">胸</el-checkbox>
              <el-checkbox label="4">腹</el-checkbox>
              <el-checkbox label="5">骨盆</el-checkbox>
              <el-checkbox label="6">上肢</el-checkbox>
              <el-checkbox label="7">下胶</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-row>
        <el-row type="flex">
          <el-form-item label="瞳孔" class="short-text" lable-width="200px">
            <el-radio-group v-model="vitalForm.tongkong">
              <el-radio label="0">正常</el-radio>
              <el-radio label="1">扩大</el-radio>
              <el-radio label="2">缩小</el-radio>
              <el-radio label="3">不规则</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-row>
        <el-row type="flex">
          <el-form-item label="瞳孔对光反射" class="short-text" lable-width="200px">
            <el-radio-group v-model="vitalForm.tk_light">
              <el-radio label="0">正常</el-radio>
              <el-radio label="1">迟钝</el-radio>
              <el-radio label="2">消失</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-row>
        <el-row type="flex">
          <el-form-item label="意识" class="short-text" width="200px">
            <el-radio-group v-model="vitalForm.yishi">
              <el-radio label="0">正常</el-radio>
              <el-radio label="1">谵妄</el-radio>
              <el-radio label="2">嗜睡</el-radio>
              <el-radio label="3">昏迷</el-radio>
              <el-radio label="4">意识模糊</el-radio>
              <el-radio label="5">昏睡</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-row>
        <el-row type="flex">
          <el-form-item label="气道" class="short-text" width="200px">
            <el-radio-group v-model="vitalForm.qidao">
              <el-radio label="0">通常</el-radio>
              <el-radio label="1">谵妄</el-radio>
              <el-radio label="2">阻塞</el-radio>
              <el-radio label="3">部分阻塞</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-row>
        <el-row type="flex">
          <el-form-item label="脉搏" class="short-text" width="200px">
            <el-radio-group v-model="vitalForm.maibo">
              <el-radio label="0">正常</el-radio>
              <el-radio label="1">脉搏有力</el-radio>
              <el-radio label="2">脉搏快</el-radio>
              <el-radio label="3">脉搏慢</el-radio>
              <el-radio label="4">脉搏消失</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-row>
        <el-row type="flex">
          <el-form-item label="心率" class="short-text" width="200px">
            <el-radio-group v-model="vitalForm.xinlv">
              <el-radio label="0">齐</el-radio>
              <el-radio label="1">不齐</el-radio>
              <el-radio label="2">消失</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-row>
        <el-row type="flex">
          <el-form-item label="胸部" class="short-text" width="200px">
            <el-radio-group v-model="vitalForm.xiongbu">
              <el-radio label="0">正常</el-radio>
              <el-radio label="1">肝大</el-radio>
              <el-radio label="2">膨隆</el-radio>
              <el-radio label="3">脾大</el-radio>
              <el-radio label="4">板状腹</el-radio>
              <el-radio label="5">舟状静脉怒张</el-radio>
              <el-radio label="6">反跳痛</el-radio>
              <el-radio label="7">压痛</el-radio>
              <el-radio label="8">腹部包块</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-row>
        <el-row type="flex">
          <el-form-item label="肠鸣" class="short-text" width="200px">
            <el-radio-group v-model="vitalForm.changming">
              <el-radio label="0">正常</el-radio>
              <el-radio label="1">亢进</el-radio>
              <el-radio label="2">减弱</el-radio>
              <el-radio label="3">消失</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-row>
        <el-row type="flex">
          <el-form-item label="肌张力" class="short-text" width="200px">
            <el-radio-group v-model="vitalForm.zhangli">
              <el-radio label="0">正常</el-radio>
              <el-radio label="1">增强</el-radio>
              <el-radio label="2">减弱</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-row>
        <el-row type="flex">
          <el-form-item label="骨折" class="short-text" width="200px">
            <el-radio-group v-model="vitalForm.guzhe">
              <el-radio label="0"> 无</el-radio>
              <el-radio label="1">有，闭合</el-radio>
              <el-radio label="2">有，开放</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-row>
        <el-form-item label="备注"><el-input v-model="vitalForm.remarks" size="mini" /></el-form-item>
      </div>
    </el-form>
    <el-dialog title="体格检查新增" :visible.sync="dialogAdd" :close-on-click-modal="false" center>
      <el-form
        ref="vitalAddform"
        :model="vitalAddform"
        label-width="120px"
        class="vitalAddform"
        :rules="vitalRules"
        style="height: auto;"
      >
        <el-row type="flex">
          <el-form-item label="创伤出血" class="short-text" width="200px" prop="chuxie">
            <el-radio-group v-model="vitalAddform.chuxie">
              <el-radio label="0">有</el-radio>
              <el-radio label="1">无</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-row>
        <el-row type="flex">
          <el-form-item label="受伤部位" class="short-text" width="200px" prop="buwei">
            <el-radio-group v-model="vitalAddform.buwei">
              <el-radio label="0">头</el-radio>
              <el-radio label="1">颈</el-radio>
              <el-radio label="2">椎</el-radio>
              <el-radio label="3">胸</el-radio>
              <el-radio label="4">腹</el-radio>
              <el-radio label="5">骨盆</el-radio>
              <el-radio label="6">上肢</el-radio>
              <el-radio label="7">下胶</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-row>
        <el-row type="flex">
          <el-form-item label="瞳孔" p class="short-text" width="200px" prop="tongkong">
            <el-radio-group v-model="vitalAddform.tongkong">
              <el-radio label="0">正常</el-radio>
              <el-radio label="1">扩大</el-radio>
              <el-radio label="2">缩小</el-radio>
              <el-radio label="3">不规则</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-row>
        <el-row type="flex">
          <el-form-item label="瞳孔对光反射" class="short-text" width="200px" prop="tk_light">
            <el-radio-group v-model="vitalAddform.tk_light">
              <el-radio label="0">正常</el-radio>
              <el-radio label="1">迟钝</el-radio>
              <el-radio label="2">消失</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-row>
        <el-row type="flex">
          <el-form-item label="意识" class="short-text" width="200px" prop="yishi">
            <el-radio-group v-model="vitalAddform.yishi">
              <el-radio label="0">正常</el-radio>
              <el-radio label="1">谵妄</el-radio>
              <el-radio label="2">嗜睡</el-radio>
              <el-radio label="3">昏迷</el-radio>
              <el-radio label="4">意识模糊</el-radio>
              <el-radio label="5">昏睡</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-row>
        <el-row type="flex">
          <el-form-item label="气道" class="short-text" width="200px" prop="qidao">
            <el-radio-group v-model="vitalAddform.qidao">
              <el-radio label="0">通常</el-radio>
              <el-radio label="1">谵妄</el-radio>
              <el-radio label="2">阻塞</el-radio>
              <el-radio label="3">部分阻塞</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-row>
        <el-row type="flex">
          <el-form-item label="脉搏" class="short-text" width="200px" prop="maibo">
            <el-radio-group v-model="vitalAddform.maibo">
              <el-radio label="0">正常</el-radio>
              <el-radio label="1">脉搏有力</el-radio>
              <el-radio label="2">脉搏快</el-radio>
              <el-radio label="3">脉搏慢</el-radio>
              <el-radio label="4">脉搏消失</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-row>
        <el-row type="flex">
          <el-form-item label="心率" class="short-text" width="200px" prop="xinlv">
            <el-radio-group v-model="vitalAddform.xinlv">
              <el-radio label="0">齐</el-radio>
              <el-radio label="1">不齐</el-radio>
              <el-radio label="2">消失</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-row>
        <el-row type="flex">
          <el-form-item label="胸部" class="short-text" width="200px" prop="xiongbu">
            <el-radio-group v-model="vitalAddform.xiongbu">
              <el-radio label="0">正常</el-radio>
              <el-radio label="1">肝大</el-radio>
              <el-radio label="2">膨隆</el-radio>
              <el-radio label="3">脾大</el-radio>
              <el-radio label="4">板状腹</el-radio>
              <el-radio label="5">舟状静脉怒张</el-radio>
              <el-radio label="6">反跳痛</el-radio>
              <el-radio label="7">压痛</el-radio>
              <el-radio label="8">腹部包块</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-row>
        <el-row type="flex">
          <el-form-item label="肠鸣" class="short-text" width="200px" prop="changming">
            <el-radio-group v-model="vitalAddform.changming">
              <el-radio label="0">正常</el-radio>
              <el-radio label="1">亢进</el-radio>
              <el-radio label="2">减弱</el-radio>
              <el-radio label="3">消失</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-row>
        <el-row type="flex">
          <el-form-item label="肌张力" class="short-text" width="200px" prop="zhangli">
            <el-radio-group v-model="vitalAddform.zhangli">
              <el-radio label="0">正常</el-radio>
              <el-radio label="1">增强</el-radio>
              <el-radio label="2">减弱</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-row>
        <el-row type="flex">
          <el-form-item label="骨折" class="short-text" width="200px" prop="guzhe">
            <el-radio-group v-model="vitalAddform.guzhe">
              <el-radio label="0"> 无</el-radio>
              <el-radio label="1">有，闭合</el-radio>
              <el-radio label="2">有，开放</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-row>
        <el-form-item label="备注"><el-input v-model="vitalAddform.remarks" size="mini" /></el-form-item>
      </el-form>
      <span slot="footer">
        <el-button @click="dialogAdd = false">取 消</el-button>
        <el-button type="primary" @click="add">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { getIntfDataWeb, modifyIntfData } from '@/api/green-channel/healthCheckup'
export default {
  // 由主页面(父组件) 接收来的, 选择项的数据
  // eslint-disable-next-line vue/require-prop-types
  props: ['checkrowdata', 'patientType'], // 由主页面(父组件) 接收来的, 选择项的数据
  data() {
    return {
      dialogAdd: false,
      trend: false,
      vitalForm: {
        buwei: []
      },
      vitalAddform: {
        chuxie: '',
        buwei: '',
        tongkong: '',
        tk_light: '',
        yishi: '',
        qidao: '',
        maibo: '',
        xinlv: '',
        xiongbu: '',
        changming: '',
        zhangli: '',
        guzhe: '',
        remarks: ''
      },
      vitalRules: {
        chuxie: [{ required: true, message: ' ', trigger: 'blur' }],
        buwei: [{ required: true, message: ' ', trigger: 'blur' }],
        tongkong: [{ required: true, message: ' ', trigger: 'blur' }],
        tk_light: [{ required: true, message: ' ', trigger: 'blur' }],
        yishi: [{ required: true, message: ' ', trigger: 'blur' }],
        qidao: [{ required: true, message: ' ', trigger: 'blur' }],
        maibo: [{ required: true, message: ' ', trigger: 'blur' }],
        xinlv: [{ required: true, message: ' ', trigger: 'blur' }],
        xiongbu: [{ required: true, message: ' ', trigger: 'blur' }],
        changming: [{ required: true, message: ' ', trigger: 'blur' }],
        zhangli: [{ required: true, message: ' ', trigger: 'blur' }],
        guzhe: [{ required: true, message: ' ', trigger: 'blur' }]
      }
    }
  },
  computed: {},
  created() {
    this.getIntfDataWeb(this.checkrowdata.dispatchId)
  },
  methods: {
    openAddDialog() {
      if (!this.vitalForm.chuxie) {
        this.vitalAddform = { buwei: [] }
        this.dialogAdd = true
      }
    },
    // 生命体征接口

    // 体格检查接口
    getIntfDataWeb(dispatchId) {
      getIntfDataWeb(dispatchId).then(res => {
        if (res.data) {
          if (res.data) {
            console.log(1)
            this.vitalForm = res.data
            if (this.vitalForm.buwei.split('|')) {
              this.vitalForm.buwei = this.vitalForm.buwei.split('|').filter(ele => ele && ele !== '')
            }
          }
        }
      })
    },
    add() {
      this.$refs.vitalAddform.validate(valid => {
        if (valid) {
          const aa = true
          if (aa) {
            console.log(this.checkrowdata, 'this.checkrowdata')
            console.log(this.$store.getters, 'getters')
            this.vitalAddform.dispatchId = this.checkrowdata.dispatchId
            this.vitalAddform.userId = this.$store.getters.userId
            this.vitalAddform.userName = this.checkrowdata.performanceName
            // eslint-disable-next-line prefer-const
            let formData = new FormData()
            for (const key in this.vitalAddform) {
              if (!this.vitalAddform[key]) {
                this.vitalAddform[key] = ''
              }
              formData.append(key, this.vitalAddform[key])
            }
            console.log(this.vitalAddform, 'this.vitalAddform')
            getIntfDataWeb(this.checkrowdata.dispatchId, formData).then(res => {
              if (res.code === 0) {
                this.$message.success('保存成功')
                this.dialogAdd = false
                this.getIntfDataWeb()
              } else {
                this.$message.error('保存失败')
              }
            })
          }
        } else {
          this.$message.error('请输入完整信息')
        }
      })
    },
    update() {
      this.$refs.vitalForm.validate(valid => {
        if (valid) {
          let temp_value = '|'
          if (this.vitalForm.buwei.length > 0) {
            for (let i = 0; i < this.vitalForm.buwei.length; i++) {
              temp_value += this.vitalForm.buwei[i] + '|'
            }
          } else {
            temp_value = ''
          }
          this.vitalForm.buwei = temp_value
          const formData = new FormData()
          formData.append('apiToken', this.$store.getters.apiToken)
          formData.append('dispatchId', this.checkrowdata.dispatchId)
          formData.append('dataStr', JSON.stringify(this.vitalForm))
          formData.append('intf', 'TraumaBodycheck')
          modifyIntfData(formData).then(res => {
            if (res.code === 0) {
              this.$message.success('保存成功')
              this.vitalAddform = { buwei: [] }
              this.getIntfDataWeb(this.checkrowdata.dispatchId)
            } else {
              this.$message.error('保存失败')
            }
          })
        } else {
          this.$message.error('请输入完整信息')
        }
      })
    },
    openDialog() {
      this.$nextTick(() => {
        this.drawLine()
      })
    }

  }
}
</script>
<style lang="scss" scoped>
.vital-sign {
  padding: 0 40px;

  .conscious-note {
    /deep/.el-form-item__content {
      line-height: 35px;
    }
  }

  .add-button {
    // position: fixed;
    // z-index: 9999;
    // bottom: 150px;
    //  right: 170px;
    text-align: right;
    padding-bottom: 15px;
  }

  .card {
    background-color: rgba(249, 249, 249, 1);
    padding: 15px 20px 15px 10px;
    margin-bottom: 15px;
  }

  .label {
    line-height: 36px;
    font-size: 14px;
    color: #606266;
    margin-left: 5px;
    min-width: 50px;
  }

  .el-form-item {
    margin-bottom: 16px;
  }

  .title {
    margin-right: 10px;
    line-height: 28px;
  }

  .lineChart {
    width: 100%;
    height: 300px;
  }

  .radio-btn {
    z-index: 10009;
    margin-left: 80px;
  }
}

.vital-sign {
  .el-form-item__label {
    font-weight: normal;
  }

  .short-text {
    .el-input__inner {
      width: 200px;
      padding-right: 10px;
      min-width: unset;
    }
  }
}
</style>
